<template>
  <div class="categories">
    <!--导航面包屑 -->
    <bread :linktitle="link"></bread>
    <!--导航面包屑 -->

    <!-- 商品分类的展示 -->
    <div class="list_wrap" v-if="tableData.length">
      <el-button type="primary" @click="openadd">添加分类</el-button>
      <table-tree
        :data="tableData"
        :columns="columns"
        :show-index="true"
        index-text="#"
        :expand-type="false"
        :selection-type="false"
        border
        max-height="520"
      >
        <template slot-scope="scope" slot="isok">
          <i
            class="el-icon-success"
            style="color: green"
            v-if="scope.row.cat_deleted == false"
          ></i>
          <i class="el-icon-error" style="color: red" v-else></i>
        </template>
        <template slot-scope="scopes" slot="control">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            size="mini"
            @click="openedit(scopes.row.cat_name)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
            @click="del(scopes.row.cat_id,scopes.row.cat_id)"
          ></el-button>
        </template>
        <template slot-scope="props" slot="level">
          <el-tag v-if="props.row.cat_level == 0">一级</el-tag>
          <el-tag v-else-if="props.row.cat_level == 1">二级</el-tag>
          <el-tag v-else>三级</el-tag>
        </template>
      </table-tree>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pagenum"
        :page-sizes="[5, 10, 20, 25]"
        :page-size="page.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="transform: translateY(15px)"
      >
      </el-pagination>
    </div>
    <!-- 商品分类的展示 -->

    <!-- 添加分类表单 -->
    <el-dialog
      title="添加分类"
      :visible.sync="dialogVisible"
      width="40%"
      style="text-align: left"
      :rules="rules"
      @close="resetForm('ruleForm')"
    >
      <span>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="分类名称 :" prop="cat_name">
            <el-input v-model="ruleForm.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类 :">
            <el-cascader
              v-model="cat_arry"
              :options="typedata"
              :props="props"
              @change="handleChange"
              expand-trigger="hover"
              ref="casca"
            ></el-cascader>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 添加分类表单 -->

    <!-- 修改分类名称 -->

    <el-dialog title="修改分类名称" :visible.sync="dialogVisible1" width="30%">
      <span>
        <el-form
          :model="ruleForm1"
          status-icon
          :rules="rules"
          ref="ruleForm1"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="分类名称 :" prop="cat_name">
            <el-input v-model="ruleForm1.cat_name"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="suredit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改分类名称 -->
  </div>
</template>

<script>
import bread from "../../common/breadcrumb";
export default {
  name: "categories",

  data() {
    return {
      link: ["商品管理", "商品分类"],
      tableData: [],
      columns: [
        { label: "商品名称", prop: "cat_name" },
        { label: "是否有效", type: "template", template: "isok" },
        { label: "层级", type: "template", template: "level" },
        { label: "操作", type: "template", template: "control" }
      ],
      total: "0", //总数目
      page: {
        query:"",//查询字符
        pagenum: 1, //当前页码
        pagesize: 5 //每页显示个数。
      },
      dialogVisible: false, //
      dialogVisible1: false,
      ruleForm1: {
        cat_name: "",
        id :""
      },
      ruleForm: {
        cat_name: "",
        cat_pid: "0",
        cat_level: "0"
      },
      rules: {
        cat_name: [{ required: true, trigger: "blur", message: "用户格式错误" }]
      },
      cat_arry: [],
      typedata: [], //二级数据
      props: {
        //配置选项

        value: "cat_id",
        label: "cat_name",
        children: "children",
        checkStrictly: true
      }
    };
  },
  methods: {
    //获取商品分类的数据
    async getcat() {
      let mes = await this.$http.get("categories", { params: this.page });
      this.tableData = mes.data.result;
      this.total = mes.data.total;
    },
    handleSizeChange(val) {
      this.page.pagesize = val;
      this.getcat();
    },
    handleCurrentChange(val) {
      this.page.pagenum = val;
      this.getcat();
    },

    //添加分类显示
    openadd() {
      this.getcats();
      this.dialogVisible = true;
    },
    submitForm() {},
    resetForm() {},
    //获取父级分类数据
    async getcats() {
      let mes = await this.$http.get("categories", { params: { type: 2 } });
      this.typedata = mes.data;
      console.log(mes);
    },

    handleChange(value) {
      this.cat_arry = value;
      console.log(value);
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          if (this.cat_arry.length > 0) {
            //当前分类的值
            this.ruleForm.cat_pid = this.cat_arry[this.cat_arry.length - 1];
            this.ruleForm.cat_level = this.cat_arry.length;
          } else {
            this.ruleForm.cat_level = this.ruleForm.cat_pid = 0;
          }
          let mes = await this.$http.post("categories", this.ruleForm);
          console.log(mes);
          if (mes.meta.status !== 201) return this.$message.error("添加失败");
          this.$message.success("添加成功");
          this.getcat();
          this.resetForm(formName);
        }
      });
    },
    resetForm(formName) {
      this.dialogVisible = false;
      this.$refs[formName].resetFields();
      this.cat_arry = [];
      this.ruleForm.cat_pid = "0";
      this.ruleForm.cat_level = "0";
    },

    //删除商品分类
    async del(id) {
      let result = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      );
      if (result == "confirm") {
        let mes = await this.$http.delete(`categories/${id}`);

        if (mes.meta.status !== 200) return this.$message.error("删除失败");
        this.$message.success("删除成功");
        this.getcat();
      }
    },
    //打开修改框
    openedit(name,id){
      this.ruleForm1.cat_name = name
      this.ruleForm1.id = id
      this.dialogVisible1 = true
     setTimeout(()=>{
        this.$refs['ruleForm1'].validate(valid=>{
        if(valid){
          
        }else{

        }
      })
     })
      

    },

    //确认修改
  suredit(){
      this.$refs['ruleForm1'].validate(valid=>{
        if(valid){
            this.$http.post('')
        }else{

        }
      })
    
  },

  
  },
  created() {
    this.getcat();
  },
  components: {
    bread
  },
  computed: {}
};
</script>
<style scoped lang="less">
.list_wrap {
  margin-top: 20px;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  text-align: left;
  button {
    margin-bottom: 10px;
  }
}
</style>
